<%--
  Created by IntelliJ IDEA.
  User: tedzy
  Date: 2015/5/21
  Time: 11:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>UPLOAD测试页</title>
</head>
<body>
注意本页面仅供测试用，并不是真正的页面。
请整合进我们的前端。

<p>选择图片：</p>
<p><input type="file" id="file1"></p>
<p><button class="btn btn-primary" id="startupload">开始上传</button></p>

<p id="st" style="background-color: #83ff7e"></p>

    <p>图片真实地址：
        <input type="text" id="imgsrc" title="图片地址">
    </p>
    <p>图片预览：</p>
    <img src="" id="preview">
<script src="/Public/js/jquery.min.js"></script>
<script>
    $(function(){
        $("#startupload").click(function(){
            var filename = $("#file1").get(0).files[0].name;
            filename = filename.substring(0, filename.lastIndexOf("."));
            $.getJSON("/getuploadtoken.json",{
                "input" : filename
            },function(data){
                $("#st").html("正在上传中，请稍候。。。");
                upload(data.token, data.key, data.upapi, data.domain);
            });
        });
    });

    function upload(token, key, upapi, domain){
        var formData = new FormData();
        formData.append('key', key);
        formData.append('token', token);
        formData.append('file', $("#file1").get(0).files[0]);
        $.ajax({
            url: upapi,
            contentType: false,
            data: formData,
            processData: false,
            type: 'POST',
            success: function(data){
                var resourceUrl = domain + data.key;
                $("#st").html("上传成功。");

                $("#imgsrc").val(resourceUrl);
                $("#preview").attr('src', resourceUrl);
            },
            error: function(xhr, error, obj){
                var data = JSON.parse(xhr.responseText);
                $("#st").html("上传失败：" + data.error);
            }
        });
    }
</script>
</body>
</html>
